<template>
    <transition name="fade">
        <div class="mask" v-if="isvisable==1">
            <transition name="upDown">
                <div class="chosegrade" v-if="isvisable==1">
                    <div class="head">
                        <div class="men"></div>
                        <div class="close" @click.stop="closeClass"></div>
                    </div>
                    <div class="listbody scroll">
                        <div v-for="(item,index) in gradeList" :key="index" class="item clearfix" @click="chose(item,index)" :class="index==choseindex?'choosen':''">
                            {{item.gradename}}
                        </div>
                        <div class="bottom clearfix"></div>
                    </div>
                </div>
            </transition>
        </div>
    </transition>
</template>

<script>
export default {
    name:"Gradechose",
    data(){
        return{
            
        }
    },
    methods:{
        closeClass(){
            this.$emit('changeVisable',this.isvisable);
        },
        chose(item,index){
            this.$emit('changeIndex',index);
            sessionStorage.setItem("gradeChose",index)
            sessionStorage.setItem("thisGrade",JSON.stringify(item))
        }
    },
    props:[
        "gradeList",
        "isvisable",
        "choseindex"
    ],
}
</script>

<style lang="scss">
.chosegrade{
    background: #ffffff;
    width: 100%;
    height: auto;
    position: fixed;
    bottom: 0;
    border-radius: .4rem .4rem 0 0;
    .head{
        position: relative;
        width: 100%;
        height: .8rem;
        .close{
            position: absolute;
            left: 6.7rem;
            bottom: 0;
            width: .48rem;
            height: .48rem;
            background: url(~@/assets/img/icon/dropdown-close.png) no-repeat;
            background-size: 100% 100%;
        }
        .men{
            position: absolute;
            left: 0;
            top:-1.18rem;
            width: 7.5rem;
            height: 4.87rem;
            z-index: -100;
            background: url(~@/assets/img/pk/men.gif) no-repeat;
            background-size: 100% 100%;
        }
        .whitemask{
            width: 100%;
            height: 100%;
            background: #ffffff;
            border-radius: .4rem .4rem 0 0;
        }
    }
    .listbody{
        padding: 0 .3rem 0 .45rem;
        width: 100%;
        height: auto;
        max-height: 6.56rem;
        .item{
            margin: .25rem .16rem 0 0;
            width: 2.06rem;
            height: .8rem;
            border-radius: .4rem;
            background: #f3f5f7;
            color: #666666;
            text-align: center;
            font-size: .3rem;
            line-height: .8rem;
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &.choosen{
                background: #02affe;
                color: #ffffff;
            }
        }
        .bottom{
            float: left;
            width: 100%;
            height: .7rem;
        }
    }
}
</style>
